<template>
  <div class="group-item">
    <div class="sentence-content">
      <div v-show="!visible" @click="itemClickHandle(item)">
        <p
          class="main-grammar"
          :class="{
            'grammar-hidden': item.clickNum >= 1 && item.clickNum % 2 === 1,
          }"
        >
          <span>{{ item.title }}</span>
          <img class="play-btn" src="~assets/reverse/audio-play.png" alt="" />
        </p>
        <p
          class="main-grammar__translate"
          :class="{ 'grammar-hidden': item.clickNum === 0 }"
        >
          {{ item.translation }}
        </p>
      </div>
      <div v-show="visible" class="record-showtext">
        <img src="~assets/reverse/mic1.png" alt="" />
        <span>复述本句</span>
      </div>
      <div class="voice-wrap" v-show="playing">
        <span class="play-time">{{ seekDuration | mmssFilter }}</span>
        <a-slider
          :tipFormatter="null"
          class="voice-range"
          :value="sliderPercentage"
        ></a-slider>
        <span class="all-time">{{ audioDuration | mmssFilter }}</span>
      </div>
    </div>
    <div class="check-grammar">
      <img
        class="mic-icon"
        src="~assets/reverse/mic-round.png"
        alt=""
        @click="recordStart"
      />
      <template v-if="path && score >= 60">
        <div>
          <span
            v-show="!playing"
            @click.stop="playRecord"
            class="record-success-play"
            >{{ score }}</span
          >
          <span
            v-show="playing"
            @click.stop="pauseRecord"
            class="record-success-pause"
          ></span>
        </div>
      </template>
      <img
        v-show="!path"
        class="recorded-icon"
        src="~assets/reverse/record-disabled.png"
        alt=""
      />
      <template v-if="path && score < 60">
        <div>
          <span
            v-show="!playing"
            @click.stop="playRecord"
            class="record-fail"
            >{{ score }}</span
          >
          <span
            v-show="playing"
            @click.stop="pauseRecord"
            class="record-fail-pause"
          ></span>
        </div>
      </template>
    </div>
    <recordModal
      :visible.sync="visible"
      :title="item.title"
      @ok="handleCompleteAudio"
    ></recordModal>
    <audio ref="itemAudio" src=""></audio>
  </div>
</template>

<script>
import recordModal from "./record-modal";
import { Howl } from "howler";
import { Slider } from "ant-design-vue";
export default {
  components: {
    recordModal,
    ASlider: Slider,
  },
  data() {
    return {
      visible: false,
      score: "",
      path: "",
      audio: "",
      htmlAudio: {},
      playing: false,
      audioDuration: 0,
      seekDuration: 0,
      seekTimer: null,
      readyTimer: null,
    };
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    itemIndex: {
      type: Number,
    },
    playCurrIndex: {
      type: Number,
    },
  },
  computed: {
    sliderPercentage: function() {
      return Math.ceil((this.seekDuration / this.audioDuration) * 100);
    },
  },
  watch: {
    path() {
      let vm = this;
      this.audio = new Howl({
        src: [this.path],
        html5: true,
        onplay: function() {
          //sound playing
          vm.playing = true;
          clearInterval(vm.seekTimer);
          vm.seekTimer = setInterval(() => {
            vm.seekDuration = vm.audio.seek();
            console.log(1111);
          }, 1000);
        },
        onload: function() {
          vm.audioDuration = this.duration();
        },
        onpause: function() {
          vm.playing = false;
          console.log("pause");
          clearInterval(vm.seekTimer);
        },
        onend: function() {
          vm.playing = false;
          console.log("end");
          // 暂时排查不出问题，end 时候先手动set 为 100%
          clearInterval(vm.seekTimer);
          vm.seekDuration = this.duration();
        },
      });
    },
    playCurrIndex(val) {
      if (val !== this.itemIndex) {
        if (this.$refs.itemAudio) {
          this.$refs.itemAudio.pause();
        }
        if (this.audio) {
          this.audio.pause();
        }
      }
    },
    visible(val) {
      if (val) {
        if (this.$refs.itemAudio) {
          this.$refs.itemAudio.pause();
        }
        if (this.audio) {
          this.audio.pause();
        }
      }
    },
  },
  methods: {
    itemClickHandle(item) {
      let n = item.clickNum ? item.clickNum + 1 : 1;
      item.clickNum = n;
      if (item.voice) {
        this.$refs.itemAudio.src = item.voice;
        this.$refs.itemAudio.play();
        if (this.audio) {
          this.audio.pause();
        }
        this.$emit("playCurrent", this.itemIndex);
      }
    },
    recordStart() {
      this.visible = true;
      if (this.$refs.itemAudio) {
        this.$refs.itemAudio.pause();
        this.$refs.itemAudio.currentTime = 0;
      }
      if (this.audio) {
          this.audio.pause();
      }
      this.$emit("playCurrent", this.itemIndex);
    },
    playRecord() {
      this.audio.play();
      this.$emit("playCurrent", this.itemIndex);
      if (this.$refs.itemAudio) {
        this.$refs.itemAudio.pause();
        this.$refs.itemAudio.currentTime = 0;
      }
    },
    pauseRecord() {
      this.audio.pause();
    },
    rangeChange(value) {
      this.seekDuration = (value / 100) * this.audioDuration;
      this.audio.seek((value / 100) * this.audioDuration);
    },
    handleCompleteAudio(data) {
      this.visible = false;
      this.score = data.score;
      this.path = data.path;
      console.log(this.item.id);
      this.$emit("recordSuccess", { id: this.item.id, score: this.score });
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    if (this.$refs.itemAudio) {
      this.$refs.itemAudio.pause();
    }
    if (this.audio) {
      this.audio.stop();
    }
  },
  destroyed() {},
  activated() {},
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
@import "@/style/var.less";

.group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 15px 15px 40px;
  width: 800px;
  margin-bottom: 20px; /* no */
  background-color: #fff;
  border-radius: 10px; /* no */

  .sentence-content {
    text-align: left;
    flex: 1;
    margin-right: 24px;
    .main-grammar {
      font-weight: 700;
      .no-rem-fontsize(24px);
      &.grammar-hidden {
        visibility: hidden;
      }
    }
    .main-grammar__translate {
      margin-top: 20px;
      .no-rem-fontsize(18px);
      &.grammar-hidden {
        visibility: hidden;
      }
    }
    .play-btn {
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
    .voice-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40px;
      color: @primary-color;
      .no-rem-fontsize(14px);
      .voice-range {
        flex: 1;
        margin: 0 16px;
      }
      .play-num {
        display: inline-block;
        width: 24px; /* no */
        height: 24px; /* no */
        line-height: 24px; /* no */
        border-radius: 50%;
        border: 2px solid @primary-color; /* no */
        margin-left: 14px;
      }
    }
  }

  .record-showtext {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    & > img {
      width: 62px;
    }
    & > span {
      font-size: 40px;
      color: @primary-color;
      font-weight: 700;
      margin-left: 10px;
    }
  }

  .check-grammar {
    width: 90px;
    .mic-icon {
      width: 80px;
    }

    .record-success-play {
      display: block;
      color: #fff;
      width: 88px;
      height: 82px;
      line-height: 76px;
      background-image: url("~assets/reverse/record-success.png");
      background-size: 100%;
    }
    .record-success-pause {
      display: block;
      color: #fff;
      width: 88px;
      height: 82px;
      line-height: 82px;
      background-image: url("~assets/reverse/record-pause.png");
      background-size: 100%;
    }

    .record-fail {
      display: block;
      color: #fff;
      width: 88px;
      height: 82px;
      line-height: 78px;
      background-image: url("~assets/reverse/record-fail.png");
      background-size: 100%;
    }
    .record-fail-pause {
      display: block;
      position: relative;
      color: #fff;
      width: 88px;
      height: 82px;
      line-height: 82px;
      background-image: url("~assets/reverse/record-fail.png");
      background-size: 100%;
      &::after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        background-color: #fff;
        top: 49%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .recorded-icon {
      width: 62px;
      height: 52px;
    }
  }
}
</style>
